import * as React from 'react';
import { Icon, Popconfirm, message } from 'antd';
import makeHoc from 'components/common/makeHoc';
import AudioPlayer from 'components/common/AudioPlayer';
import CONFIG from 'constants/config';

import { saveLessonAudio } from 'actions/lesson';

import { isLoading } from 'utils/utils';
import ACTIONS from 'constants/lesson';

import LoadableComponent from 'components/common/LoadableComponent';
const LoadableAttachPopToSelect = LoadableComponent(() => import('pages/attachment/PopToSelect'));

interface EditAudioProps {
  dispatch: (action: any) => any;
  handleCallback: () => any;
  lessonDetail: any;
  selectedItems: any[];
  loadingGroup: any;
}

interface EditAudioState {
  isSelectAudio: boolean;
}
class EditAudio extends React.Component<EditAudioProps, EditAudioState> {
  static defaultProps: EditAudioProps = {
    dispatch: () => {},
    handleCallback: () => {},
    lessonDetail: null,
    selectedItems: [],
    loadingGroup: {},
  };
  constructor(props: EditAudioProps) {
    super(props);
    this.state = {
      isSelectAudio: false,
    };
  }

  handleRemoveAudio() {
    const { dispatch, lessonDetail, handleCallback } = this.props;

    dispatch(saveLessonAudio(lessonDetail.id, 0)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        message.success('删除成功');
        handleCallback();
      }
    });
  }

  handleCloseModal = () => {
    this.setState({
      isSelectAudio: false,
    });
  };

  handleOpenModal = () => {
    this.setState({
      isSelectAudio: true,
    });
  };

  ConfirmToDelete(props: any) {
    return (
      <Popconfirm
        okText="确定"
        cancelText="取消"
        title="你确定要删除此音频吗？"
        onConfirm={props.onRemove}>
        <Icon type="close" />
      </Popconfirm>
    );
  }

  handleSubmit = () => {
    const { dispatch, lessonDetail, selectedItems, handleCallback } = this.props;
    const lessonId = lessonDetail.id;
    const audio = selectedItems[0];

    dispatch(saveLessonAudio(lessonId, audio.id)).then((result: any) => {
      if (result.code) {
        message.error(result.msg);
      } else {
        message.success('保存成功');

        this.handleCloseModal();
        handleCallback();
      }
    });
  };

  renderItems = (): any => {
    const { audio } = this.props.lessonDetail;

    let renderHtml = null;
    if (!audio) {
      renderHtml = (
        <p className="loading-placeholder">
          <Icon type="frown-o" />&nbsp;还没有数据，&nbsp;
          <a href="javascript:void(0);" onClick={this.handleOpenModal}>
            <Icon type="plus" />添加
          </a>
        </p>
      );
    } else {
      renderHtml = (
        <div
          key={audio.id}
          className="classic-upload-item"
          style={{ display: 'flex', alignItems: 'center' }}>
          <div className="classic-thumbnail">
            <AudioPlayer isTiny={true} audioUri={audio.uri} />
          </div>
          <div className="classic-item-name">{audio.name}</div>
          <div className="classic-operation">
            <this.ConfirmToDelete
              onRemove={() => {
                this.handleRemoveAudio();
              }}
            />
          </div>
        </div>
      );
    }
    return renderHtml;
  };

  render() {
    const { loadingGroup, lessonDetail } = this.props;
    const { isSelectAudio } = this.state;

    const ownItems = lessonDetail.audio ? [lessonDetail.audio] : [];

    return (
      <div>
        {isSelectAudio && (
          <LoadableAttachPopToSelect
            loading={isLoading(loadingGroup, ACTIONS.UPDATE)}
            selectType={CONFIG.ITEM_AUDIO}
            selectMax={1}
            ownItems={ownItems}
            onCancel={this.handleCloseModal}
            onOk={this.handleSubmit}
          />
        )}
        {this.renderItems()}
      </div>
    );
  }
}

interface OwnProps {
  lessonDetail: any;
  handleCallback: () => any;
}

function mapStateToProps(state: any, ownProps: OwnProps) {
  const { loadingGroup } = state;
  const { selectedItems } = state.attachment;
  const { lessonDetail, handleCallback } = ownProps;
  return {
    loadingGroup,
    lessonDetail,
    handleCallback,
    selectedItems,
  };
}

export default makeHoc(mapStateToProps)(EditAudio, {
  addAudio() {
    this.handleOpenModal();
  },
});
